<template>
  <div :class="[us.b()]">
    <div class="hhd-login-layout-1-container">
      <div :class="[us.e('logo')]">
        <slot name="logo"/>
      </div>
      <div class="hhd-login-layout-1-form-wrapper">
        <div>
          <slot name="username"/>
        </div>
        <div style="margin-top: 20px;">
          <slot name="password"/>
        </div>
        <div style="margin-top: 20px;">
          <slot name="chekcode"/>
        </div>
        <div style="margin-top: 10px; border-radius: 100px">
          <slot name="buttons"/>
        </div>
      </div>
    </div>

    <div class="infos-wrapper">
      <slot name="infos"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {useNamespace} from "@/utils";

const us = useNamespace('login-layout-1')

</script>
<style scoped lang="scss">
.hhd-login-layout-1 {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
}

.hhd-login-layout-1-container {
  width: calc(100vw - 120px);
}

.hhd-login-layout-1-form-wrapper {
  flex: 1;
}

.hhd-login-layout-1 .infos-wrapper {
  position: fixed;
  bottom: 20px;
  color: white;
}
</style>